import { useSyncExternalStore, useDebugValue } from 'react'

export function useOnlineStatus() {
	const isOnline = useSyncExternalStore(
		subscribe,
		() => navigator.onLine,
		() => true,
	)
	useDebugValue(isOnline ? 'Online' : 'Offline')
	return isOnline
}

function subscribe(callback: any) {
	window.addEventListener('online', callback)
	window.addEventListener('offline', callback)
	return () => {
		window.removeEventListener('online', callback)
		window.removeEventListener('offline', callback)
	}
}
